<template>
  <div class="am-content">
    <div class="top-box">
      <div class="top-left"/>
      <div class="top-title">
        <img src="@/assets/police_oa/pic03.png" alt="">
        <span>互联网报警服务接警大厅</span>
      </div>
      <ul class="top-right">
        <li v-for="todo in todos" :key="todo.text">
          <i :class="todo.class"/>
          <span>{{ todo.text }}</span>
        </li>
      </ul>
    </div>
    <div class="layout-rend">
      <el-button type="success" icon="el-icon-refresh" @click="refreshQuery">刷新</el-button>
    </div>
    <ul class="zuoxi">
      <template v-for="item in lists">
        <li :class="['zx-item', item.style]" :key="item.id">
          <template v-if="item.status == 0">
            <img class="zx-img" src="@/assets/police_oa/pic07.png" alt="">
            <div class="zxi-free">空闲</div>
          </template>
          <template v-else>
            <img class="zx-img" src="@/assets/police_oa/pic08.png" alt="">
            <div>
              <div class="zx-info">
                <span class="zxi-left">警号:</span>
                <span class="zxi-right">{{ item.account }}</span>
              </div>
              <div class="zx-info">
                <span class="zxi-left">接警员:</span>
                <span class="zxi-right">{{ item.name }}</span>
              </div>
              <div class="zx-info">
                <span class="zxi-left">所属坐席:</span>
                <span class="zxi-right">{{ item.seatName }}</span>
              </div>
              <div class="zx-info">
                <span class="zxi-left">接警类型:</span>
                <span class="zxi-right">{{ item.type | typeFilter }}</span>
              </div>
            </div>
          </template>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
  import {getLobby} from "../../../api/bureau/lobby/lobby";

  export default {
    name: "index",
    components: {},
    data() {
      return {
        todos: [
          {text: "可选坐席", class: "icon-kx"},
          {text: "正在接警", class: "icon-zz"},
          {text: "等待接警", class: "icon-dd"},
          {text: "暂时离开", class: "icon-zs"}
        ],
        lists: []
      };
    },
    computed: {},
    watch: {},
    filters: {
      typeFilter(type) {
        if (type == 0) {
          return "视频报警";
        } else if (type == 2) {
          return "事故快处";
        } else if (type == 3) {
          return "警用视频";
        } else {
          return "事故快处";
        }
      }
    },
    mounted() {
      this.queryData();
    },
    methods: {
      queryData() {
        let that = this;
        getLobby().then((response) =>{
          console.log(response)
          that.lists = response.data.data;
        })
      },
      refreshQuery() {
        this.queryData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../styles/lobby";

  .am-content {
    padding: 20px;
    background-color: #ffffff;
  }
</style>
